import React, {Component} from 'react';
import {List} from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
require('isomorphic-fetch');
import './index.scss';
import {Scroller, Touchable} from '$yo-component';
class Experience extends Component {
    constructor() {
        super();
        this.state = {
            dataSource: [
                {
                    title: '',
                    key: ++guid,
                    url: '',
                    content: ''
                }
            ]
        };
    }

    fetch() {
        fetch('http://localhost:3000/production').then((response) => {

            return response.json();
        }).then((posts) => {
            this.setState({dataSource: posts});
        });

    }
    componentWillMount() {
        this.fetch();
    }
    render() {
        return (
            <div className="yo-flex">
                <Header title="项目"/>

                <List
                    ref="flex"
                    extraClass="flex"
                    dataSource={this.state.dataSource}
                    
                    renderItem={(item, i) => 
                        
                    <div className="yo-card">
                    <div className="extra">
                        <img className="img-cover" src={item.images} alt="项目图片"/>
                        <div className="img-desc">
                            <p className="desc">{item.name}</p>
                        </div>
                    </div>
                    <div className="bd">
                        <div className="detail">项目性质：{item.category}</div>
                        <div className="detail">项目名称：{item.name}</div>
                        <div className="content">项目描述：
                            <p>{item.description}</p>
                        </div>
                        <div className="detail">
                            <a className="link" href={item.url}>项目网址:{item.url}</a>
                        </div>
                        <div className="content">项目实现：
                            <p>{item.detail}</p>
                        </div>
                        <div className="content">项目实现：
                            <p>{item.tech}</p>
                        </div>
                    </div>
                </div>
                  
            }/>
            </div>
        )
    }
}
let guid = -1;
function getRandomDataSource(size) {
    return getRandomList(size).map(num => ({
        text: num,
        key: ++guid
    }));
}

export default Experience;
